<!-- 图片仓库管理页 -->
<template>
  <div>
    <div v-if="isshow" >
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;height:46px">
        <el-form :inline="true" >
          <el-form-item>
            <el-input v-model="filters.companyName" size="small" placeholder="企业名称" style="margin-top:4px;width: 135px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.scenicName" size="small" placeholder="景区名称" style="margin-top:4px;width: 135px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.scenicKeyCn" size="small" placeholder="景区关键字中文" style="margin-top:4px;width: 135px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="filters.scenicKeyPn" size="small" placeholder="景区关键字拼音" style="margin-top:4px;width: 135px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.picType" size="small" placeholder="图片类型" style="margin-top:4px;width: 135px;" clearable id="el-select">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="景点" value="0"></el-option>
              <el-option label="签证" value="1"></el-option>
              <el-option label="线路" value="2"></el-option>
              <el-option label="酒店" value="3"></el-option>
              <el-option label="机票" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="filters.status" size="small" placeholder="审核状态" style="margin-top:4px;width: 135px;" clearable id="el-select">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="未审核" value="0"></el-option>
              <el-option label="审核成功" value="1"></el-option>
              <el-option label="审核失败" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="getAuth(3)">
            <el-button type="primary" v-on:click="search" size="small" style="line-height:14px;margin-top:4px;">查询</el-button>
          </el-form-item>
          <el-form-item class="button-align">
            <el-button type="primary" @click="handleAdd" size="small" v-if="getAuth(0)">上传图片</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!--列表-->
      <el-table :data="picStoreList" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" v-loading="listLoading" tooltipEffect="light">
        <!--<el-table-column type="selection"></el-table-column>-->
        <el-table-column align="center" prop="companyName" label="企业名称"></el-table-column>
        <el-table-column align="center" prop="scenicName" label="景区名称" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="scenicKeyCn" label="景区关键字中文" width="160px" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="scenicKeyPn" label="景区关键字拼音"  width="160px" show-overflow-tooltip>
        </el-table-column>
        <el-table-column align="center" prop="address" :formatter="addressStrStr" label="地址" show-overflow-tooltip>
         </el-table-column>
        <el-table-column align="center" prop="picType" :formatter="picTypeStr" label="图片类型"></el-table-column>
        <el-table-column align="center" prop="status" :formatter="statusStr" label="审核状态"></el-table-column>
        <el-table-column align="center" prop="createTime" :formatter="createTimeStr" label="创建时间"  width="180px"></el-table-column>
        <el-table-column align="center" label="操作"  width="160px" height="30px">
          <template scope="scope" >
            <el-button size="small" type="success" @click="clickbutton1(scope.row)" v-if="getAuth(1)">详情</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"  v-if="getAuth(2)">删除</el-button>
            <el-button size="small" type="primary" @click="submitFun(scope.$index, scope.row)"
                       v-if="getAuth(4) && (scope.row.status === 2 || scope.row.status === '2')">提交</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar" v-show="!listLoading" style="margin-top: 15px;">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;" id="pagination">
        </el-pagination>
      </el-col>
      <!--<el-col :span="24" class="toolbar" v-show="!listLoading" style="margin-top: 15px;">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;" id="pagination">
        </el-pagination>
      </el-col>-->
      <!--新增（上传图片）-->
      <el-dialog :title="dialogTitle" :visible.sync="showAdd" :close-on-click-modal="false" @close="clearValidate" style="top:10%;" id="dialogbox">
        <el-form :model="picStoreEntity" :rules="picAddRules" :inline="true" ref="picStore" style="margin-bottom:20px;margin-top:-20px;margin-left:80px;" label-width="125px">
          <el-form-item label="图片类型:" prop="picType"  id="formheight"  style="margin-right:20px">
            <el-select v-model="picStoreEntity.picType" clearable placeholder="请选择" style="width: 160px">
              <el-option label="景点" value="0"></el-option>
              <el-option label="签证" value="1"></el-option>
              <el-option label="线路" value="2"></el-option>
              <el-option label="酒店" value="3"></el-option>
              <el-option label="机票" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="景色名称:" prop="scenicName" id="formheight" style="margin-right:20px">
            <el-input v-model="picStoreEntity.scenicName" id="scenicName" size="small" style="width: 160px;"></el-input>
          </el-form-item>
          <el-form-item label="景区关键字中文:" prop="scenicKeyCn" id="formheight_text">
            <!--<textarea size="small" v-model="picStoreEntity.scenicKeyCn" id="scenicKeyCn" style="width: 450px;border:1px solid #D1DBE5;resize: none;vertical-align: top;height:66px;" placeholder="多个说明以|分隔"></textarea>-->
            <el-input type="textarea" v-model="picStoreEntity.scenicKeyCn" style="width: 455px;"placeholder="多个说明以|分隔，不能超过50个汉字"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="省/市/县:" prop="city"  id="formheight" style="margin-top:-4px;">
            <kt-distpicker :placeholders="placeholders"
                           :province="picStoreEntity.province" :city="picStoreEntity.city" :area="picStoreEntity.county"
                           @selected="citySelected" style="width: 457px"
            ></kt-distpicker>
          </el-form-item>
        </el-form>
        <el-upload
          class="avatar-uploader" style="margin-top: -20px;width:90%;margin:0 auto"
          ref="upload"
          action="/smartLight/web/sysPicStore/picstoreUpload.htm"
          :multiple=true
          list-type="picture-card"
          accept=".JPEG,.jpeg,.JPG,.jpg,.GIF,.gif,.PNG,.png,.BMP,.bmp,.Photo,.photo"
          :auto-upload="false"
          :file-list="filelist"
          :on-remove="removeFun"
          :on-change="beforeAvatarUpload"
          :on-success="handleSuccess_bl">
          <i class="el-icon-plus"></i>
          <div scope="tip" class="el-upload__tip" style="color:#FF7F0E">支持bmp,jpg,png,jpeg四种格式，一次最多上传10张图片，大小不得超过2M</div>
        </el-upload>
        <div scope="footer" class="dialog-footer"
             style="bottom:20px;right:20px;">
          <el-button @click.native="cancalFun">取消</el-button>
          <el-button type="primary" @click.native="handleSubmit" v-if="opType === 'add'" :loading="savePicLoadingAddLoading">保存</el-button>
          <el-button type="primary" @click.native="submitAudits" v-if="opType === 'audits'" :loading="savePicLoadingAuditsLoading">提交</el-button>
        </div>
      </el-dialog>
      <!--审核-->
      <el-dialog :title="dialogTitle" :visible.sync="showCheck" :close-on-click-modal="false" @close="clearValidate" style="top:10%;" id="dialogbox">
        <el-form :model="picStoreEntity" :rules="picStoreFormRules" :inline="true" ref="picStore" style="margin-top:-20px;margin-left:80px;" label-width="125px">
          <el-form-item label="图片类型:" prop="pic"  id="formheight"  style="margin-right:20px;">
            <el-select v-model="picStoreEntity.picType" clearable placeholder="请选择" style="width: 160px" :disabled="true">
              <el-option label="景点" value="0"></el-option>
              <el-option label="签证" value="1"></el-option>
              <el-option label="线路" value="2"></el-option>
              <el-option label="酒店" value="3"></el-option>
              <el-option label="机票" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="景色名称:" prop="scenicName" id="formheight" style="margin-right:20px:">
            <el-input v-model="picStoreEntity.scenicName" id="scenicName" size="small" style="width: 160px;" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="景区关键字中文:" prop="scenicKeyCn" id="formheight" >
            <textarea size="small" v-model="picStoreEntity.scenicKeyCn" id="scenicKeyCn" style="width: 450px;border:1px solid #D1DBE5;resize: none;vertical-align: top;height:66px;" :disabled="true" placeholder="多个说明以|分隔"></textarea>
          </el-form-item>
          <br>
          <el-form-item label="省/市/县:" prop="city"  id="formheight" style="margin-top:40px">
            <div class="block" id="fontsize">
              <kt-distpicker :placeholders="placeholders"
                             :province="picStoreEntity.province" :city="picStoreEntity.city" :area="picStoreEntity.county" :disabled="true"
                             @selected="citySelected" style="width: 457px"
              ></kt-distpicker>
            </div>
          </el-form-item>
          <div style="width:780px;margin:0 auto">
            <el-form-item label="" prop="">
              <el-col :span="24" style="overflow:hidden;width:100%">
                <div class="picbox" v-for="(pic, index) in picAddressList" >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="nextPic(pic)" class="image" height="100px" :onerror="logo">
                    <div style="padding: 14px;">
                      <div class="bottom clearfix">
                        <el-button type="text" class="button">查看原图</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="审核:" prop="stauts"  style="margin-right:20px;">
              <el-radio class="radio" v-model="picStoreEntity.status" label="1" size="small">通过</el-radio>
              <el-radio class="radio" v-model="picStoreEntity.status" label="2" size="small">不通过</el-radio>
            </el-form-item>
          </div>
          <el-form-item label="审核备注:" prop="" style="width: 600px;margin-right:20px;">
            <el-input
              type="textarea"
              :rows="2"
              style="width: 400px;"
              :maxlength="255"
              placeholder="请输入内容"
              v-model="remark">
            </el-input>
          </el-form-item>
        </el-form>
        <div>
          <div scope="footer" class="dialog-footer" style="margin-left: 350px">
            <el-button @click.native="showCheck = false">取消</el-button>
            <el-button type="primary" @click.native="toExamine" :loading="auditsLoading">保存</el-button>
          </div>
        </div>
      </el-dialog>

      <!--查看-->
      <el-dialog :title="dialogTitle" :visible.sync="showCheck1" :close-on-click-modal="false" @close="clearValidate" style="top:10%;" id="dialogbox">
        <el-form :model="picStoreEntity" :rules="picStoreFormRules" :inline="true" ref="picStore" style="margin-top:-20px;margin-left:80px;" label-width="125px">
          <el-form-item label="图片类型:" prop="picType"  id="formheight"  style="margin-right:20px;">
            <el-select v-model="picStoreEntity.picType" clearable placeholder="请选择" style="width: 160px" :disabled="true">
              <el-option label="景点" value="0"></el-option>
              <el-option label="签证" value="1"></el-option>
              <el-option label="线路" value="2"></el-option>
              <el-option label="酒店" value="3"></el-option>
              <el-option label="机票" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="景色名称:" prop="scenicName" id="formheight" style="margin-right:20px;">
            <el-input v-model="picStoreEntity.scenicName" id="scenicName" size="small" style="width: 160px;" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="景区关键字中文:" prop="scenicKeyCn" id="formheight">
            <textarea size="small" v-model="picStoreEntity.scenicKeyCn" id="scenicKeyCn" style="width: 450px;border:1px solid #D1DBE5;resize: none;vertical-align: top;height:66px;" :disabled="true" placeholder="多个说明以|分隔"></textarea>
          </el-form-item>
          <br>
          <el-form-item label="省/市/县:" prop="city"  id="formheight" style="margin-top:40px">
            <div class="block" id="fontsize">
              <kt-distpicker :placeholders="placeholders"
                             :province="picStoreEntity.province" :city="picStoreEntity.city" :area="picStoreEntity.county" :disabled="true"
                             @selected="citySelected" style="width: 457px"
              ></kt-distpicker>
            </div>
          </el-form-item>
          <div>
            <el-form-item label="" prop="">
              <el-col :span="24" style="overflow:hidden;margin-left: 5%;width:800px">
                <div class="picbox" v-for="(pic, index) in picAddressList" >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="nextPic(pic)" class="image" height="100px" :onerror="logo">
                    <div style="padding: 14px;">
                      <div class="bottom clearfix">
                        <el-button type="text" class="button">查看原图</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-col>
            </el-form-item>
          </div>
          <el-form-item label="审核状态:" prop="status" id="formheight" style="margin-right:20px;">
            <el-select v-model="picStoreEntity.status" clearable placeholder="请选择" style="width: 160px" :disabled="true">
              <el-option label="未审核" value="0"></el-option>
              <el-option label="审核成功" value="1"></el-option>
              <el-option label="审核失败" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核备注:" prop="remark" id="formheight" >
            <textarea size="small" v-model="picStoreEntity.remark" style="width: 450px;border:1px solid #D1DBE5;resize: none;vertical-align: top;height:66px;" :disabled="true"></textarea>
          </el-form-item>
        </el-form>
        <div>
          <div scope="footer" class="dialog-footer" style="margin-left: 350px;margin-top: 50px;">
            <el-button type="primary" @click.native="showCheck1 = false">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VDistpicker from 'v-distpicker'
  import KtDistpicker from '../base/citiesPlugin/kt-distpicker.vue'
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        savePicLoadingAddLoading: false, // 新增动画按钮
        savePicLoadingAuditsLoading: false, // 审核失败再次提交按钮动画
        auditsLoading: false, // 提交审核动画按钮
        filelist: [],
        remark: '',
        fname: '', // 上传文件成功后后台返回的文件名
        fcount: '', // 上传文件成功的次数
        filters: {
          companyName: '', // 企业名称
          scenicName: '', // 景区名称
          scenicKeyCn: '', // 景区关键字中文
          scenicKeyPn: '', // 景区关键字拼音
          picType: '', // 图片类型
          status: '' // 审核状态
        },
        logo: 'this.src="http://139.196.235.76/ftp/tourTest/static/file/picstore/2017-6-26/20176261498447024647.png"', // 默认图片
        placeholders: { // 省市区组件为空时的占位符
          province: '------- 省 --------',
          city: '--------------- 市 ---------------',
          area: '--------------- 区 ---------------'
        },
        isshow: true,
        uploadPicStoreNum: 0, // 上传图片的数量
        picStoreList: [],
        total: 2,
        page: 1,
        pageSize: 10,
        listLoading: false,
        showAdd: false,
        showCheck: false,
        showCheck1: false,
        addLoading: false,
        ebookingsButtons: [505, 506, 507, 536, 580], // 上传，详情，删除，查询，提交
        picAddress: '',
        picAddressList: [],
        hasNewPic: false, // 审核失败，再次修改提交，判断是否有新的图片
        allOldPicList: [], // 上传成功的图片集合
        companyId: '', // 公司id
        companytype: '', // 公司帐号类型
        picStoreEntity: { // 图片仓库实体类
          id: '',
          accountType: '', // 账号类型
          companyId: '', // 企业ID
          scenicName: '', // 景区名称
          scenicKeyCn: '', // 景区关键字中文
          picUrl: '', // 图片路径
          picType: '', // 图片类型
          city: '', // 市
          province: '', // 省
          county: '', // 县/镇
          status: '', // 审核状态
          remark: '' // 审核备注
        },
        opType: 'add',
        type: '',
        dialogTitle: '上传图片',
        picStoreFormRules: {
          scenicName: [
            {required: true, message: '请输入景色名称', trigger: 'blur'}
          ],
          picType: [
            {required: true, message: '请选择图片类型', trigger: 'change'}
          ],
          scenicKeyCn: [
            {required: true, message: '请输入景区关键字中文', trigger: 'blur'}
          ],
          status: [
            {required: true, message: '', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '城市信息请填写完整', trigger: 'change'}
          ]
        },
        picAddRules: {
          scenicName: [
            {required: true, message: '请输入景色名称', trigger: 'blur'}
          ],
          picType: [
            {required: true, message: '请选择图片类型', trigger: 'change'}
          ],
          scenicKeyCn: [
            {required: true, message: '请输入景区关键字中文', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '城市信息请填写完整', trigger: 'change'}
          ]
        }
      }
    },
    watch: {
      pic: function () {
        return 'http://139.196.235.76/ftp/tourTest/static/file/picstore'
      }
    },
    methods: {
      checkIfLogin () { // 判断是否登录超时
        var user = sessionStorage.getItem('user')
        if (!user) {
          this.$alert('登录超时，请重新登录！', ' ', {
            type: 'warning'
          }).then(() => {
            this.$router.push({path: '/login'})
            sessionStorage.clear()
          })
        } else {
          return true
        }
      },
      // 验证即将上传的图片是否合法--单仕瑞--2017年5月26日 13:32:01
      beforeAvatarUpload (file, fileList) {
        var isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) { // 当前添加的图片不符合要求则从缩略图中删掉
          this.$message.error('上传图片大小不能超过 2MB!')
          fileList.splice(fileList.length - 1, 1)
        }
        if (fileList.length > 10) {
          this.$message.error('上传图片不能超过10张!')
          fileList.splice(10, fileList.length - 10)
        } else if (fileList.length === 10) {
          document.getElementsByClassName('el-upload el-upload--picture-card')[0].style.display = 'none'
        } else {
          document.getElementsByClassName('el-upload el-upload--picture-card')[0].style.display = ''
        }
        let num = 0
        for (var i in fileList) {
          if (fileList[i].status === 'ready') {
            this.hasNewPic = true
          }
          if (fileList[i].name === file.name) {
            num++
            if (num > 1) {
              this.$message.error('不能重复上传相同图片!')
              fileList.splice(fileList.length - 1, 1)
              return false
            }
          }
        }
        // 获取图片的长宽
        var img = new Image()
        img.src = file.url
        this.uploadPicStoreNum = fileList.length
        this.picAddressList = fileList
      },
      // 城市组件选择事件
      citySelected (cities) {
        this.picStoreEntity.province = cities.province
        this.picStoreEntity.city = cities.city
        this.picStoreEntity.county = cities.area
      },
      // 时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        var date = d.getDate()
        var hour = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
        var minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
        var second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
        return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
      },
      // 审核状态格式化
      statusStr (row, column) {
        var html = ''
        if (row.status === 0 || row.status === '0') {
          html = '未审核'
        } else if (row.status === 1 || row.status === '1') {
          html = '审核成功'
        } else if (row.status === 2 || row.status === '2') {
          html = '审核失败'
        }
        return html
      },
      getAuth (index) {
        if (this.companytype === 1) { // 供应商
          let buttonIds = sessionStorage.getItem('buttonIds')
          if (buttonIds === null) {
            return false
          }
          let buttonId = this.ebookingsButtons[index]
          buttonIds = ',' + buttonIds + ','
          if (buttonIds.indexOf(',' + buttonId + ',') >= 0) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      },
      // 图片类型格式化
      picTypeStr (row, column) {
        var html = ''
        if (row.picType === 0 || row.picType === '0') {
          html = '景点'
        } else if (row.picType === 1 || row.picType === '1') {
          html = '签证'
        } else if (row.picType === 2 || row.picType === '2') {
          html = '线路'
        } else if (row.picType === 3 || row.picType === '3') {
          html = '酒店'
        } else if (row.picType === 4 || row.picType === '4') {
          html = '机票'
        }
        return html
      },
      // 地址格式化
      addressStrStr (row, column) {
        var html = ''
        if (row.province !== '') {
          html += row.province
        }
        if (row.city !== '') {
          html += row.city
        }
        if (row.county !== '') {
          html += row.county
        }
        return html
      },
      nextPic (val) {
        var url = 'http://139.196.235.76/ftp/tourTest/static/file/picstore' + val
        return url
      },
      // 清除文本框信息
      clearValidate () {
        this.filelist = []
        this.$refs['picStore'].resetFields()
      },
      cancalFun () {
        this.filelist = []
        this.showAdd = false
      },
      removeFun (file, filelist) {
        for (var i in filelist) {
          if (filelist[i].status === 'ready') {
            this.hasNewPic = true
          }
        }
        for (var j in this.allOldPicList) {
          if (this.allOldPicList[j] === file.name) {
            this.allOldPicList.splice(j, 1)
          }
        }
        if (this.allOldPicList.length === filelist.length) {
          this.hasNewPic = false
        }
      },
      handleSizeChange (val) { // 改变页面展示条数时触发重新查询--单仕瑞--2017年5月26日 13:34:09
        this.pageSize = val
        this.initBasePicStoreList()
      },
      handleCurrentChange (val) { // 改变页面展示条数时触发重新查询--单仕瑞--2017年5月26日 13:34:14
        this.page = val
        this.initBasePicStoreList()
      },
      search () { // 根据【条件】查询--单仕瑞--2017年5月26日 13:34:30
        if (!this.checkIfLogin()) {
          return
        }
        this.initBasePicStoreList()
      },
      initBasePicStoreList () { // 初始化查询图片仓库信息--单仕瑞--2017年5月27日 10:05:08
        this.listLoading = true
        if (this.uploadPicStoreNum > 0) {
          this.$refs.upload.clearFiles()
        }
        this.uploadPicStoreNum = 0
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          accountType: this.companytype,
          companyName: this.filters.companyName,
          scenicName: this.filters.scenicName,
          scenicKeyCn: this.filters.scenicKeyCn,
          scenicKeyPn: this.filters.scenicKeyPn,
          picType: this.filters.picType,
          status: this.filters.status,
          type: this.companytype,
          companyId: this.companyId
        }
        if (this.$route.params.sysType !== undefined) {
          para.sysType = this.$route.params.sysType
        }
        this.$http.post('/smartLight/web/sysPicStore/getList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.picStoreList = resBody.result.content
          } else if (resBody.isSuccess === 2) {
            this.$alert(resBody.errorMsg, {
              type: 'warning'
            }).then(() => {
              this.$router.push({path: '/login'})
              sessionStorage.clear()
            })
          } else if (resBody.isSuccess === 4) {
            this.total = 0
            this.picStoreList = resBody.result.content
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      handleAdd () { // 控制上传图片时的弹出层--单仕瑞--2017年5月26日 13:37:35
        this.checkRoleName = false
        this.showAdd = true
        this.opType = 'add'
        this.dialogTitle = '上传图片'
        this.picStoreEntity = {
          accountType: '', // 账号类型
          companyId: '', // 企业ID
          scenicName: '', // 景区名称
          scenicKeyCn: '', // 景区关键字中文
          picUrl: '', // 图片路径
          picType: '', // 图片类型
          province: '', // 省
          city: '', // 市
          county: '' // 县/镇
        }
      },
      // 重新编写，提交审核
      submitFun (index, row) {
        this.dialogTitle = '提交审核'
        this.opType = 'audits'
        this.showAdd = true
        this.picStoreEntity = Object.assign({}, row)
        this.picStoreEntity.picType = row.picType.toString()
        this.allOldPicList = row.picUrl.split('|')
        let iul = 'http://139.196.235.76/ftp/tourTest/static/file/picstore'
        for (var i in this.allOldPicList) {
          this.filelist.push({name: this.allOldPicList[i], url: iul + this.allOldPicList[i]})
        }
      },
      // 提交审核
      submitAudits () {
        if (!this.checkIfLogin()) {
          return
        }
        this.$refs.picStore.validate((valid) => {
          if (valid) {
            if (!this.hasNewPic && this.allOldPicList.length === 0) {
              this.$message.error('请选择上传的图片!')
              return
            }
            if (this.hasNewPic) { // 新添加了图片
              this.$refs.upload.submit()
            } else { // 没添加新图片，更新要重新提交审核的信息
              var url = '/smartLight/web/sysPicStore/savePicstore.htm'
              let imgurl = ''
              for (var i in this.allOldPicList) {
                imgurl += this.allOldPicList[i] + '|'
              }
              imgurl = imgurl.substring(0, imgurl.length - 1)
              var picStore = {
                id: this.picStoreEntity.id,
                type: this.companytype,
                scenicName: this.picStoreEntity.scenicName,
                scenicKeyCn: this.picStoreEntity.scenicKeyCn,
                picUrl: imgurl,
                province: this.picStoreEntity.province,
                city: this.picStoreEntity.city,
                county: this.picStoreEntity.county,
                picType: this.picStoreEntity.picType
              }
              this.savePicLoadingAuditsLoading = true
              this.doUpdate(url, picStore)
            }
          }
        })
      },
      handleSubmit () { // 上传图片时的提交--单仕瑞--2017年5月26日 13:39:26--update 禹光彩-2017-7-24 10:55:49
        if (!this.checkIfLogin()) {
          return
        }
        this.$refs.picStore.validate((valid) => {
          if (valid) {
            if (this.uploadPicStoreNum === 0) {
              this.$message.error('请选择上传的图片!')
              return
            }
            this.$refs.upload.submit()
          }
        })
      },
      // 上传
      handleSuccess_bl (resp, f, fl) {
        if (!this.checkIfLogin()) {
          return
        }
        let r = JSON.parse(this.decode(resp))
        if (r.res !== 0) { // 如果上传失败
          console.debug(f.status) // success
          console.debug(r.errorMsg)
          this.$message.error(r.errorMsg)
        } else if (r.res === 0) { // 如果上传成功
          if (r.fileName !== '') {
            this.fcount ++
            this.fname += r.fileName + '|'
          }
          this.picStoreEntity.picUrl = this.fname.substring(0, this.fname.length - 1)
          var url = '/smartLight/web/sysPicStore/savePicstore.htm'
          var picStore = {}
          if (this.opType === 'add') {
            if (this.fcount === this.uploadPicStoreNum) { // 新增图库信息
              // 调用保存此次图片仓库上传信息
              picStore = {
                type: this.companytype,
                scenicName: this.picStoreEntity.scenicName,
                scenicKeyCn: this.picStoreEntity.scenicKeyCn,
                picUrl: this.picStoreEntity.picUrl,
                province: this.picStoreEntity.province,
                city: this.picStoreEntity.city,
                county: this.picStoreEntity.county,
                picType: this.picStoreEntity.picType
              }
              this.savePicLoadingAddLoading = true
              this.doUpdate(url, picStore)
            }
          } else if (this.opType === 'audits') { // 修改图库信息，提交审核 禹光彩 2017-7-24 14:02:45
            let imgurl = ''
            if (this.uploadPicStoreNum === (this.allOldPicList.length + this.fcount)) {
              if (this.allOldPicList.length > 0) {
                for (var i in this.allOldPicList) {
                  imgurl = this.allOldPicList[i] + '|'
                }
              }
              picStore = {
                id: this.picStoreEntity.id,
                type: this.companytype,
                scenicName: this.picStoreEntity.scenicName,
                scenicKeyCn: this.picStoreEntity.scenicKeyCn,
                picUrl: imgurl + this.picStoreEntity.picUrl,
                province: this.picStoreEntity.province,
                city: this.picStoreEntity.city,
                county: this.picStoreEntity.county,
                picType: this.picStoreEntity.picType
              }
              this.doUpdate(url, picStore)
            }
          }
        }
      },
      doUpdate (url, params) { // 对后台保存此次图片仓库操作后的结果在页面展示（成功or失败）--单仕瑞--2017年5月26日 16:44:51
        if (!this.checkIfLogin()) {
          return
        }
        this.$http.post(url, params).then(response => {
          this.savePicLoadingAddLoading = false
          this.savePicLoadingAuditsLoading = false
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.showAdd = false
            this.addLoading = false
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })
            this.initBasePicStoreList()
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      // 审核--单仕瑞--2017年6月1日 11:13:59
      clickbutton (row) {
        this.dialogTitle = '审核'
        this.showCheck = true
        this.picStoreEntity = row
        this.picStoreEntity.picType = row.picType.toString()
        this.picAddress = row.picUrl
        this.picAddressList = row.picUrl.split('|')
      },
      // 详情--丁翔--2017年7月7日15:34:57
      clickbutton1 (row) {
        if (!this.checkIfLogin()) {
          return
        }
        this.dialogTitle = '详情'
        this.showCheck1 = true
        this.picStoreEntity = row
        this.picStoreEntity.picType = row.picType.toString()
        this.picAddress = row.picUrl
        this.picAddressList = row.picUrl.split('|')
        this.picStoreEntity.status = row.status.toString()
      },
      // 审核提交
      toExamine () {
        if (!this.checkIfLogin()) {
          return
        }
        var params = {
          type: this.companytype, // 用户type
          id: this.picStoreEntity.id, // 审核图库id
          remark: this.remark, // 审核备注
          status: this.status // 审核状态
        }
        if (this.status === '2' && this.remark.length === 0) {
          this.$message({
            showClose: true,
            message: '审核不通过,请备注原因',
            type: 'error'
          })
          return
        }
        this.auditsLoading = true
        this.$http.post('/smartLight/web/sysPicStore/updateById.htm', params).then(response => {
          this.auditsLoading = false
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.showAdd = false
            this.addLoading = false
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })
            this.showCheck = false
            this.initBasePicStoreList()
          } else if (resBody.isSuccess === 2) {
            this.listLoading = false
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      handleDelete (index, row) { // 需要删除的id--单仕瑞--2017年5月27日 10:00:25
        var ids = []
        ids.push(row.id)
        this.deletePicStore(ids)
      },
      deletePicStore (ids) { // 进行删除的方法--单仕瑞--2017年5月27日 10:00:30
        if (!this.checkIfLogin()) {
          return
        }
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/sysPicStore/delById.htm', ids + '|' + this.companytype).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0 && resBody.errorMsg === '') {
              this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              this.initBasePicStoreList()
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '操作失败，' + resBody.errorMsg,
                type: 'error'
              })
              this.initBasePicStoreList()
            }
          })
        }).catch(() => {})
      }
    },
    mounted () { // 钩子函数，相当于进入页面后的初始化--单仕瑞--2017年4月12日 13:44:41
      resetBreads(this)
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.companytype = user.type
        this.companyId = user.companyId
        this.picStoreEntity.companyId = this.companyId
        this.picStoreEntity.accountType = this.companytype
        this.initBasePicStoreList()
      }
    },
    components: {
      KtDistpicker,
      VDistpicker
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .is-light
    max-width: 600px;
  .tabRow
    font-size: 12px;
  .button-align
    float: right;
  .el-dialog--small
    width: 37%;
  .prompt
    color: #ff4949
    line-height: 10px !important;
    display: block;

  #formheight
    margin-left: -15px;
    margin-right: 10px;
    height: 38px;
    .el-form-item__content
      height: 32px;
    .el-input
      height: 28px;
      .el-input__inner
        height: 28px;

  .borderStyle
    .el-input .el-input__inner {
      border-color: #ff4949 !important;
    }

  #pagination
    background-color: transparent
    .el-input__inner
      width: 120px
  .picbox
    width:130px;
    height:200px;
    position:relative;
    overflow:hidden
    float:left;
    margin-right:10px;
    margin-top:10px;
    .wd300
      height:93px;
      width:150px;
      position:absolute;
      top:0;
      left:0;
    .redfont
      color:red;
      position:absolute;
      right:10px;
      top:4px;
      cursor:pointer;
      font-size:18px;
      z-index:10;
    .redfont:hover
      transform:scale(1.2,1.2);
      transition:transform 0.3s ease 0s;
  #fontsize
    select
      font-size:10px;
  #dialogbox
    .el-dialog
      width:950px!important
  #el-select
    .el-input
      vertical-align:top;
  .cell
    padding-left: 0px !important
    padding-right 0px !important
    overflow: hidden !important
    text-overflow: ellipsis !important
    white-space: nowrap !important
    .el-checkbox {
      padding-left: 15px !important
    }
#formheight_text
  margin-left: -15px;
  .el-form-item__error
    margin-top:0px;
</style>
